<template>
  <div class="page-card sharelink">
    <h-query :showKey="['title', 'startTime,endTime']" @search="search">
      <!-- <h-tooltip slot="btn" title="关键词搜索好像没用" /> -->
    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="true"
      :zebraStripes="true"
      @changeStatus="changeStatus">
      <span slot="shareLink" slot-scope="{text}">
        <a-tooltip :title="text" placement="topLeft">
          <a :href="text" target="_blank">{{ text }}</a>
        </a-tooltip>
      </span>
      <span slot="password" slot-scope="{text, record}">
        <div v-if="!record.hidePwd">{{ text | formatPwd(record.hidePwd) }} <a-icon type="eye" @click="record.hidePwd = true" /> </div>
        <div v-else>{{ text | formatPwd(record.hidePwd) }} <a-icon type="eye-invisible" @click="record.hidePwd = false" /> </div>

      </span>
      <span slot="action" slot-scope="{text, record}">
        <a class="red" @click="remove(record)">终止分享</a>
      </span>
    </h-table>

  </div>
</template>
<script>
import { shareLink, changeShareStatus } from '@/api/serve';
export default {
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '事件名称',
            dataIndex: 'title',
            width: 300
          },
          {
            align: 'center',
            title: '分享人',
            dataIndex: 'createBy'
          },
          {
            align: 'center',
            title: '分享链接',
            dataIndex: 'shareLink',
            scopedSlots: { customRender: 'shareLink' },
            ellipsis: true
          },
          {
            align: 'center',
            title: '密码',
            dataIndex: 'password',
            scopedSlots: { customRender: 'password' }
          },
          {
            align: 'center',
            title: '时间',
            dataIndex: 'createTime'
          }
          // {
          //   align: 'center',
          //   title: '操作',
          //   dataIndex: 'status',
          //   scopedSlots: { customRender: 'statusSlide' }
          // }
        ],
        pagination: {
          total: 100
        }
      },
      form: {

      },
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  filters: {
    formatPwd(value, hide) {
      if (hide) return '********';
      return value || '当前没有密码';
    }
  },
  methods: {
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      shareLink(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e,
            status: !e.status,
            hidePwd: true
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    remove({ id }) {
      changeShareStatus({ id, status: 1 }).then(res => {
        this.$message.success('终止成功');
        this.$refs.htable.refresh(true);
      });
    },
    search(params) {
      Object.assign(this.queryParams, params, { eventTitle: params.title });
      this.$refs.htable.refresh();
    },
    changeStatus({ id, status }) {
      changeShareStatus({ id, status: status ? 0 : 1 }).then(res => {
        this.$message.success('修改状态成功');
        this.$refs.htable.refresh(true);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.sharelink {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
